<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';



let blog=ref({
  id:0,
  title:"",
  author:"",
  conternt:"",
})
let myshow=ref(false)
let keyword=ref('')

let blogs=ref([])

function butSave(){
  console.log("保存");
  if(blog.value.id>0){
    let kzArr=blogs.value.filter(item=>item.id===blog.value.id)
    if(kzArr.length>0){
      let kcArr=kzArr[0]
      
      kcArr.title=blog.value.title
      kcArr.author=blog.value.author
      kcArr.conternt=blog.value.conternt
    } 
  }else{
    let ids =blogs.value.map(item=>item.id)
    let maxId=Math.max(...ids)
    blog.value.id=maxId+1
    blogs.value.push(blog.value)
  }
  
 
   
  myshow.value=false
}

function butCancel(){
  console.log("取消");
  myshow.value=false
}

function butAdd(){
  console.log("新增");
  myshow.value=true
  blog.value = {}; 
}

function butFind(id){
  console.log("查找");
  let kcArr=blogs.value.filter(item=>item.title.includes(keyword.value))
  blogs.value=kcArr
}
onMounted(async ()=>{
  console.log('I can see you')
  let res =await axios.get('http://localhost:3000/blogs')
  console.log(res);
  blogs.value=res.data.data
  
})
function butEdit(id){
  console.log("编辑");
  let kzArr=blogs.value.filter(item=>item.id===id)
  if(kzArr.length>0){
    let kcArr=kzArr[0]
    console.log(kcArr);
    blog.value={
     id: kcArr.id,
     title: kcArr.title,
     author: kcArr.author,
     conternt: kcArr.conternt
    }
      
    
  }
  myshow.value=true
}

async function butDel(id){
  console.log("删除");
 let res=await axios.delete('http://localhost:3000/blogs/'+id)
 if(res.data.code===1000){
  let idx=blogs.value.findIndex(item=>item.id===id)
  console.log(idx);
  
  blogs.value.splice(idx,1)
 }else{
  alert(res.data.msg)
 }
}





</script>

<template>
  <div>
    <div v-show="myshow" class="addOrEdit">
      <form>
        <table>
          <tbody>
            <tr>
              <td><table>标题</table></td>
              <td><input type="text"  v-model="blog.title"></td>
            </tr>
            <tr>
              <td><table>作者</table></td>
              <td><input type="text" v-model="blog.author"></td>
            </tr>
            <tr>
              <td><table>内容</table></td>
              <td><input type="text" v-model="blog.conternt"></td>
            </tr>
            <tr>
              <td><input type="button" value="保存" @click="butSave()"></td>
              <td><input type="button" value="取消" @click="butCancel()"></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
    <div class="operation">
      <input type="text"  placeholder="请输入关键字" v-model="keyword">
      <input type="button" value="新增" @click="butAdd()">
      <input type="button" value="查找" @click="butFind()">
    </div>
    <div class="list">
      <table>
          <thead>
            <tr>
            <th>id</th>
            <th>标题</th>
            <th>作者</th>
            <th>内容</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
            <tr v-for="blog in  blogs" :key="blog.id">
              <td>{{blog.id}}</td>
              <td>{{blog.title}}</td>
              <td>{{blog.author}}</td>
              <td>{{blog.conternt}}</td>
              <td>
                <input type="button" value="编辑" @click="butEdit(blog.id)">
                <input type="button" value="删除" @click="butDel(blog.id)">
              </td>
            </tr>
          </tbody>
  
      </table>
    </div>
  </div>
 
</template>

<style scoped>
 
</style>

